<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <span>{{message}}</span>
    <custom-input v-model="searchText"></custom-input>
    <span>{{searchText}}</span>
<btn>
    <!--不写默认default-->
    <span v-solt:default>你好吗</span>
</btn>
<hr>
    <br>

<button v-for="tab in tabs" @click="currentTab = tab">
    {{tab}}
</button>
    <component :is="currentTabComponent"></component>
</div>
<template id="btn">
    <div class="demo-alert-box">
        <strong>Error!</strong>
        <slot>默认123</slot>
    </div>
</template>

<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script>

    Vue.component('custom-input', {
        props: ['value'],
        template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
    });



    const btn = {
        template: "#btn",
        data() {
            return {
                apples2:[1,2,3,4,5]
            }
        }
    };



    Vue.component("tab-home", {
        template: "<div>Home component</div>"
    });
    Vue.component("tab-posts", {
        template: "<div>Posts component</div>"
    });
    Vue.component("tab-archive", {
        template: "<div>Archive component</div>"
    });
    const vm = new Vue({
        el: "#app",
        data: {
            message: "hello vue",
            title: "fa",
            searchText: '',
            currentTab: "Home",
            tabs: ["Home", "Posts", "Archive"]
        },
        methods: {},
        created: function () {

        },
        mounted: function () {

        },
        computed:{
            currentTabComponent: function() {
                return "tab-" + this.currentTab.toLowerCase();
            }
        },
        components: {
            btn: btn
        }
    })


</script>
</body>
</html>
